/* 
* @Author: Turbidsoul Chen
* @Date:   2016-12-08 12:04:15
* @Last Modified by:   Turbidsoul
* @Last Modified time: 2017-01-26 19:46:12
*/
import React, { Component } from 'react';
import {observer, inject} from 'mobx-react';
import {Button, Grid, Col, Badge} from 'amazeui-react';


@inject('timerStore')
@observer
export default class SampleIndexView extends Component {
  static propTypes = {
    timerStore: React.PropTypes.object.isRequired
  }
  constructor() {
    super();
  }
  state = {
    incStart: false,
    incFlag: null
  }

  startTimer() {
    this.props.timerStore.incSecondsPasswd();
  }
  componentWillUnmount() {
    if(this.state.incFlag !== null) {
      clearInterval(this.state.incFlag);
    }
  }
  render() {
    return (
      <div>
        <Grid>
          <Col sm={1}>
            {this.props.timerStore.secondsPasswd}
          </Col>
          <Col sm={10}>
            <Button
              radius
              active={this.state.incStart}
              onClick={()=>{
                this.setState({incStart: !this.state.incStart});
                if(this.state.incStart && this.state.incFlag !== null) {
                  clearInterval(this.state.incFlag);
                } else {
                  let incFlag = setInterval(::this.startTimer, 1000);
                  this.setState({incFlag});
                }
              }} 
              amStyle={this.state.incStart?'danger':'primary'}>
              {this.state.incStart?'停止':'开始'}
            </Button>
          </Col>
        </Grid>
      </div>
    );
  }
}
